iT邦幫忙

2022 iThome 鐵人賽

DAY 4
0

DrawerLayout 是一個隱藏式的側拉選單,效果確實如其名稱"抽屜"一樣,讓我們來看看他式怎麼使用的

  1. 創建menu內容(dawer_menu)

放入想出現在側拉選單的內容。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_confirm"
        android:title="確認"
        android:icon="@drawable/ic_baseline_done_24" />

    <item
        android:id="@+id/menu_cancel"
        android:title="取消"
        android:icon="@drawable/ic_baseline_close_24" />
</menu>
  1. 將Activity or Fragment 的Layout改為DrawerLayout
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <!--內容ui-->
    
</androidx.drawerlayout.widget.DrawerLayout>
  1. 加入NavigationView

負責管理側拉選單內的功能,在此與第一步的menu綁定(app:menu="@menu/drawer_menu")

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <!--內容ui-->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/display_nvg"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:itemTextColor="@color/black"
        app:menu="@menu/drawer_menu" />
        
</androidx.drawerlayout.widget.DrawerLayout>

  1. 實例化與綁定、設置內容監聽
    private Toolbar toolbar;
    private DrawerLayout drawerLayout;
    private NavigationView display_nvg;
    private final Context mContext = this;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = findViewById(R.id.toolbar);
        drawerLayout = findViewById(R.id.drawer_layout);
        display_nvg = findViewById(R.id.display_nvg);
        Log.e("TAG", "onCreate: "+drawerLayout);
        //設置toolbar、記得去theme改NoActionBar
        setSupportActionBar(toolbar);
        //設置切換按鈕(左上角三條線)
        ActionBarDrawerToggle toggle =
                new ActionBarDrawerToggle(this,drawerLayout,toolbar,
                        R.string.drawer_open,R.string.drawer_close);
        //與Drawer綁定
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
        //NavigationView 內容點擊監聽
        display_nvg.setNavigationItemSelectedListener(
        new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //透過munu中的id尋找被點擊的項目
                switch (item.getItemId()){
                    case R.id.menu_confirm:
                        Toast.makeText(mContext,"確認",Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.menu_cancel:
                        Toast.makeText(mContext,"取消",Toast.LENGTH_SHORT).show();
                        return true;
                }
                return false;
            }
        });
    }

以上就是簡單的DrawerLayout與NavigationView的配合應用,可以發揮自己的想像力應用,增加自己UI的多樣性,我個人認為是個實用且好看的元件,推薦給大家拉~

結果效果

https://ithelp.ithome.com.tw/upload/images/20220801/20139136lXM69WJ25K.jpg

補充

NavigationView裡增加Header

  1. 新增Header的Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:gravity="center|center_vertical"
        android:padding="30dp"
        android:background="@color/purple_500"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:background="@drawable/profile_frame"
            app:srcCompat="@drawable/ic_baseline_person_24" />
        <TextView
            android:id="@+id/name_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:textSize="20sp"
            android:textColor="@color/black"
            android:text="" />
    </LinearLayout>
</LinearLayout>
  1. 在原xml中的NavigationView加入app:headerLayout="",並放入剛才新增的layout
<com.google.android.material.navigation.NavigationView
        android:id="@+id/display_nvg"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:itemTextColor="@color/black"
        app:headerLayout="@layout/navigation_header_layout"
        app:menu="@menu/drawer_menu" />

這可以讓NavigationView看起來更提升一個等級,我個人覺得一定要知道,而且只需要新增一個xml和短短增加一行就能達成,讓我們來看看效果:

結果效果

https://ithelp.ithome.com.tw/upload/images/20220801/20139136VZpYPzYt6D.jpg

是不是看起來豐富好看多了呢!

以上就是今天的內容拉,希望對各位有幫助。


上一篇
精華筆記 Day3--PopView、ContextMenu
下一篇
精華筆記 Day5--DatePicker、TimePicker
系列文
android studio 30天 精華筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言